<template>
  <div class="main" id="country"></div>
</template>

<script>
import china from "/public/js/China.json"; // 引入地图json数据
import * as echarts from "echarts";
export default {
  name: "app",
  data() {
    return {
      option: {
        geo: [
          {
            map: "JS",
            zlevel: 5,
            label: {
              show: true,
              color: "#rgba(0,0,0,0.7)",
              fontSize: "10",
            },
            itemStyle: {
              borderColor: "rgba(0,0,0,0.2)",
              // color: "#2075B8",
              // borderColor: "#fff",
              // color: item.value > 20 ? "#2075B8" : "pink", // 背景
              emhasis: {
                areaColor: "#f3b329",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
          {
            map: "JS",
            top: "11%",
            zlevel: 4,
            itemStyle: {
              color: "#3C5FA1", // 背景
              borderWidth: "1", // 边框宽度
              borderColor: "#3C5FA1", // 边框颜色
            },
          },
        ],
        series: [
          {
            name: "机构数量",
            type: "map",
            geoIndex: 0,
            itemStyle: {
              label: {
                show: true,
              },
              emphasis: {
                label: {
                  show: true,
                },
              },
            },
            data: [
              { name: "北京", selected: false, value: 1 },
              { name: "天津", selected: false, value: 2 },
              { name: "上海", selected: false, value: 3 },
              { name: "重庆", selected: false, value: 4 },
              { name: "河北", selected: false, value: 5 },
              { name: "河南", selected: false, value: 6 },
              { name: "云南", selected: false, value: 7 },
              { name: "辽宁", selected: false, value: 8 },
              { name: "黑龙江", selected: false, value: 9 },
              { name: "湖南", selected: false, value: 10 },
              { name: "安徽", selected: false, value: 11 },
              { name: "山东", selected: false, value: 12 },
              { name: "新疆", selected: false, value: 13 },
              { name: "江苏", selected: false, value: 14 },
              { name: "浙江", selected: false, value: 15 },
              { name: "江西", selected: false, value: 16 },
              { name: "湖北", selected: false, value: 17 },
              { name: "广西", selected: false, value: 18 },
              { name: "甘肃", selected: false, value: 19 },
              { name: "山西", selected: false, value: 20 },
              { name: "内蒙古", selected: false, value: 21 },
              { name: "陕西", selected: false, value: 22 },
              { name: "吉林", selected: false, value: 23 },
              { name: "福建", selected: false, value: 24 },
              { name: "贵州", selected: false, value: 25 },
              { name: "广东", selected: false, value: 26 },
              { name: "青海", selected: false, value: 27 },
              { name: "西藏", selected: false, value: 28 },
              { name: "四川", selected: false, value: 29 },
              { name: "宁夏", selected: false, value: 30 },
              { name: "海南", selected: false, value: 31 },
              { name: "台湾", selected: false, value: 32 },
              { name: "香港", selected: false, value: 33 },
              { name: "澳门", selected: false, value: 34 },
            ],
          },
        ],
      },
    };
  },
  methods: {},
  mounted() {
    let chart = echarts.init(document.getElementById("country"));
    echarts.registerMap("JS", china);
    chart.setOption(this.option);

    window.onresize = () => {
      chart.resize();
    };
  },
};
</script>

<style lang="scss" scoped>
.main {
  background-color: rgb(51, 51, 85);
}
</style>
